<template>
  <div>
    <div class="header">
      <el-menu
        :default-active="value"
        active-text-color="#409eff"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="baseSetting" @click="to('baseSetting')"
          >① {{ t('designer.baseSetting') }}
        </el-menu-item>
        <el-menu-item index="formSetting" @click="to('formSetting')"
          >② {{ t('designer.appForm') }}
        </el-menu-item>
        <el-menu-item index="tblColumnConfig" @click="to('tblColumnConfig')"
          >③
          {{ t('designer.tblColumn') }}
        </el-menu-item>
        <el-menu-item index="proSetting" @click="to('proSetting')"
          >③
          {{ t('designer.extensionSetting') }}
        </el-menu-item>
      </el-menu>

      <div class="publish">
        <el-button size="mini" @click="preview"
          ><i class="el-icon-view"></i>
          {{ t('designer.actions.check') }}
        </el-button>
        <el-button size="mini" @click="draft"
          ><i class="el-icon-view"></i>{{ t('designer.actions.draft') }}
        </el-button>
        <el-button size="mini" type="primary" @click="publish"
          ><i class="el-icon-s-promotion"></i>{{ t('designer.actions.publish') }}
        </el-button>
      </div>
      <div class="back">
        <el-button @click="exit" size="medium" circle>
          <Icon icon="ep:back" />
        </el-button>

        <span>
          <!--          <ef-icon-preview :value="setup.logo" view-size="small"></ef-icon-preview>-->
          <!--          <span>{{ setup.formName }}</span>-->
        </span>
      </div>
    </div>
  </div>
</template>

<script setup type="ts">
import {ref, computed, onMounted} from 'vue';
import {useI18n} from '@/hooks/web/useI18n'
import {ElMessageBox} from "element-plus";
import {useApprovalDesignerStore} from "@/store/modules/dsgn/ApprovalDesigner";

const {t} = useI18n()
const props = defineProps({
  value: {
    type: String,
    default: 'baseSetting'
  }
});


const message = useMessage() // 消息弹窗
const emit = defineEmits(['publish', 'preview', 'draft', 'input']);

const viewCode = ref(false);


const approvalDesignerStore = useApprovalDesignerStore();

onMounted(() => {
  console.log(document.body.offsetWidth);
  if (document.body.offsetWidth <= 970) {
    this.$msgbox.alert("本设计器未适配中小屏幕，建议您在PC电脑端浏览器进行操作");
  }
  listener();
});

const publish = () => {
  emit('publish');
};

const preview = () => {
  emit('preview');
  viewCode.value = true;
};

const draft = () => {
  emit('draft');
};

const valid = () => {
  if (!this.$isNotEmpty(setup.value.group)) {
    this.$message.warning('请选择分组');
    this.$router.push('/layout/baseSetup');
    return false;
  }
  return true;
};

const exit = () => {
  ElMessageBox.confirm(
    '未 <strong>保存</strong> 或者 <strong>发布</strong> 的设计内容将会丢失，是否直接退出 ?', '提示', {
      confirmButtonText: '退出',
      cancelButtonText: '取消',
      dangerouslyUseHTMLString: true,
      type: 'warning'
    }).then(() => {
    approvalDesignerStore.setDesignerVisible(false);
  });
};

const to = (path) => {
  emit('input', path);
};

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};

const listener = () => {
  window.onunload = closeBefore();
  window.onbeforeunload = closeBefore();
};

const closeBefore = () => {
  return false;
};

const check = () => {
  if (this.$store.state.isEdit === null) {
    //this.$router.push("/workPanel");
  }
};
</script>

<style lang="scss" scoped>
::v-deep .header {
  min-width: 980px;
  position: relative;

  .el-menu {
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .publish {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 1000;

    i {
      margin-right: 6px;
    }

    button {
      border-radius: 15px;
    }
  }

  .back {
    position: absolute;
    z-index: 1000;
    top: 10px;
    left: 20px;
    font-size: small;

    span {
      i {
        border-radius: 10px;
        padding: 7.8px;
        font-size: 20px;
        margin: 0 10px;
      }
    }
  }

  .logout {
    padding: 10px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 10px;
    border-radius: 5px;
  }

  .logout:hover {
    color: var(--color-black);
    background-color: var(--color-black-200);
  }
}
</style>
